//1.下包并引入路由
import VueRouter from "vue-router";
import Vue from "vue";
// 路由懒加载:
const Home = () => import("@/pages/Home");
const Login = () => import("@/pages/Login");
const News = () => import("@/pages/Home/News");
const Music = () => import("@/pages/Home/Music");
const Game = () => import("@/pages/Home/Game");
const NotFound = () => import("@/pages/NotFound/404");
const MusicDetail = () => import("@/pages/Home/Music/MusicDetail");
const NewsDetail = () => import("@/pages/Home/News/NewsDetail");
const GameDetail = () => import("@/pages/Home/Game/GameDetail");

Vue.use(VueRouter);

//3.创建路由器对象，并在内部配置模式和路由表
const router = new VueRouter({
    mode: "history",
    routes: [
        {
            path: "/",
            redirect: "/Home",
        },
        {
            path: "/Home",
            component: Home,
            //二级路由配置
            children: [
                {
                    path: "News",
                    component: News,
                    name: "News",
                    children: [
                        {
                            path: "NewsDetail",
                            component: NewsDetail,
                            name: "NewsDetail",
                            props: (route) => {
                                return {
                                    ...route.params,
                                    ...route.query,
                                    classRoom: "2222",
                                    count: "33"
                                }
                            }
                        },
                    ]
                },
                {
                    path: "Music",
                    component: Music,
                    name: "Music",
                    children: [
                        {
                            /* params参数可以设置可选 */
                            path: "MusicDetail/:id/:age?",
                            component: MusicDetail,
                            name: "MusicDetail",
                            props: true
                        },
                    ],
                },
                {
                    path: "Game",
                    component: Game,
                    name: "Game",
                    children: [
                        {
                            path: "GameDetail",
                            component: GameDetail,
                            name: "GameDetail",
                            meta: {
                                hidden: true,
                                icon: "plus"
                            },
                            props: (route) => {
                                return {
                                    ...route.meta
                                }
                            }
                        }
                    ]
                },
                {
                    path: "",
                    redirect: "News",
                },
            ],
        },
        {
            path: "/Login",
            component: Login,
            name: "Login",
        },

        //404配置卸载最下边
        {
            path: "/*",
            component: NotFound,
        },
    ],
});

// 全局前置守卫
router.beforeEach((to, from, next) => {
    /*
        to:要去的路由对象
        from:来源的路由对象
        next:是一个函数,必须书写,否则直接停止到当前位置
            + next():直接放行
            + next(false):中断当前导航
            + next(string|location):指定导航地址
     */
    next()
})

// 暴露router，注入到vue实例中
export default router;
